<template>
  <el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246);">
      <el-menu :default-openeds="['1', '3']">
        <el-menu-item index="4" @click="showPage('/')">
          <i class="el-icon-setting"></i>
          <span slot="title">Hello</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>地图leaflet
          </template>
          <el-menu-item index="1-1" @click="showPage('/map/map-base')">Map Base</el-menu-item>
          <el-menu-item index="1-2" @click="showPage('/map/map-control')">Map Control</el-menu-item>
          <el-menu-item index="1-3" @click="showPage('/map/map-control-layer')">Map ControlLayer</el-menu-item>
          <el-menu-item index="1-4" @click="showPage('/map/map-heat')">Map Heat</el-menu-item>
          <el-menu-item index="1-5" @click="showPage('/map/map-geojson')">Map Geojson</el-menu-item>
          <el-menu-item index="1-6" @click="showPage('/map/map-vectorgrid')">Map Vectorgrid</el-menu-item>
          <el-menu-item index="1-7" @click="showPage('/map/map-vectorgrid2')">Map Vectorgrid2</el-menu-item>
        </el-submenu>
        
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-message"></i>序列图
          </template>
          <el-menu-item index="2-1" @click="showPage('/scroller')">scroller</el-menu-item>
          <el-menu-item index="2-2" @click="showPage('/seq-test')">Simple Sequence</el-menu-item>
          <el-menu-item index="2-3" @click="showPage('/seq-diagram')">Advanced Sequence</el-menu-item>
          <el-menu-item index="2-4" @click="showPage('/seq-diagram2')">Advanced Sequence2</el-menu-item>
        </el-submenu>

        
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-message"></i>工具
          </template>
          <el-menu-item index="3-1" @click="showPage('/tools/transform')">转换GPS</el-menu-item>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-message"></i>Big View
          </template>
          <el-menu-item index="4-1" @click="showPage('/bigview/1')">Big View 1</el-menu-item>
          <el-menu-item index="4-2" @click="showPage('/echarts/timelinemap')">time line map</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container style="min-height: 800px;">
      <el-header style="text-align: right; font-size: 12px">page header</el-header>

      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default { 
  data() {
    return {}
  },
  created() {
    // 性能测试
    // var i = 0
    // var $this = this ;
    // setInterval(function() {
    //   if (i % 2 == 0) {
    //     $this.$router.push('/map/map-base')
    //   } else {
    //     $this.$router.push('/map/map-control')
    //   }
    //   i++ ;
    // },200)
  },
  methods: {
    // 显示路由页面
    showPage(routerPath) {
      this.$router.push(routerPath)
    }
  }
}
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
